<template>
  <div class="body">
    <NavbarTurn @func="getMsgFormSon" @func1="getMsgFormSon1" @func2="getMsgFormSon2"></NavbarTurn>
    <div :style="{marginTop: (msgFormSon+msgFormSon1+5)+ 'px'}">
      <div class="navbar">
        <div class="status" v-on:click="changePage1">
          <text class="pay_status">全部订单</text>
          <div class="isIn" v-if="all===true"></div>
        </div>
        <div class="status" v-on:click="changePage2">
          <text class="pay_status">待付款</text>
          <div class="isIn" v-if="obligation===true"></div>
        </div>
        <div class="status" v-on:click="changePage3">
          <text class="pay_status">待发货</text>
          <div class="isIn" v-if="unDelivery===true"></div>
        </div>
        <div class="status" v-on:click="changePage4">
          <text class="pay_status">待收货</text>
          <div class="isIn" v-if="dispatched===true"></div>
        </div>
        <div class="status" v-on:click="changePage5">
          <text class="pay_status">退款</text>
          <div class="isIn" v-if="refund===true"></div>
        </div>
      </div>
      <div>
        <div class="under" v-for="list in arrlist" @click="gotoPage(list.dealStatus,list)">
          <div class="head">
            <text class="createTime_text">{{list.gmtCreate}}</text>
            <text class="orderId_text">订单号：{{list.dealCode}}</text>
          </div>
          <div class="line"></div>
          <div class="bodyofbody" v-for="(list1,key1) in list.paintingDTOS">
            <div class="div2">
              <div class="pic_div">
                <img
                  mode="aspectFit"
                  :src="list1.pmUrl"
                  alt=""
                  class="rightulliimg"
                >
              </div>
              <div class="title_div">
                <text class="title">{{list1.paintingName}}</text>
              </div>
              <div>
                <text class="price">¥{{list1.paintingPrice}}</text>
              </div>
              <text class="pay" v-if="list.paymentMethod===0">微信支付</text>
            </div>
            <div class="line"></div>
          </div>
          <div class="end">
            <div class="div_money">
            <text class="count_text">共{{list.paintingCount}}件商品，合计¥{{list.paintingPaid}}元</text>
            </div>
            <div class="status_div">
            <text class="status_text1" v-if="list.dealStatus===0">待付款</text>
            </div>
            <div class="button1" v-if="list.dealStatus===0" @click="goPayment(list)">
              <text class="button1_text">去付款</text>
            </div>
            <div class="status_div">
            <text class="status_text" v-if="list.dealStatus===1">待发货</text>
            </div>
            <div class="status_div1">
            <text class="status_text2" v-if="list.dealStatus===2">待收货</text>
            </div>
            <div class="button2" v-if="list.dealStatus===2">
              <text class="button1_text">查看物流</text>
            </div>
            <div class="button3" v-if="list.dealStatus===2" @click="gotoReceived()">
              <text class="button1_text">确认收货</text>
            </div>
            <div class="status_div">
            <text class="status_text" v-if="list.dealStatus===4">已退款</text>
            </div>
            <div class="status_div">
            <text class="status_text" v-if="list.dealStatus===5">已完成</text>
            </div>
            <div class="status_div">
            <text class="status_text" v-if="list.dealStatus===6">已取消</text>
            </div>
            <div class="status_div2">
            <text class="status_text1" v-if="list.dealStatus===3">退款中</text>
            </div>
            <div class="button1" v-if="list.dealStatus===3">
              <text class="button1_text">退款进度</text>
            </div>
          </div>
        </div>
      </div>
      <div class="noMore">
        <text class="end_text">—— 没有更多了 ——</text>
      </div>
    </div>
  </div>
</template>

<script>
  import NavbarTurn from "../../components/narbarTurn";

  export default {
    components: {
      NavbarTurn,
    },

    data() {
      return {
        msgFormSon: '',
        msgFormSon1: '',
        all: true,
        obligation: false,
        unDelivery: false,
        dispatched: false,
        refund: false,
        status: 0,
        paintingIds: [],
        arrlist: [

        ]
      }
    },

    onShow(){

    },

    onLoad(options) {

      if(options.dealStatus === '0'){
        this.changePage2()
        this.$forceUpdate()
      }
      else if(options.dealStatus === '1'){
        this.changePage3()

        this.$forceUpdate()
      }
      else if(options.dealStatus ==='2'){
        this.changePage4()
        this.$forceUpdate()
      }
      else if(options.dealStatus ==='3'){
        this.changePage5()
        this.$forceUpdate()
      }
      else if(options.dealStatus ==='4'){
        this.changePage1()
        this.$forceUpdate()
      }
      else{
        this.getAll();
      }
    },

    created() {
      this.getAll();
    },

    methods: {
      getMsgFormSon(data) {
        this.msgFormSon = data;
      },
      getMsgFormSon1(data) {
        this.msgFormSon1 = data;
      },
      changePage1() {
        this.all = true;
        this.obligation = false;
        this.unDelivery = false;
        this.dispatched = false;
        this.refund = false;
        this.getAll();
      },
      changePage2() {
        this.all = false;
        this.obligation = true;
        this.unDelivery = false;
        this.dispatched = false;
        this.refund = false;
        this.status = 0;
        this.getStatus();
      },
      changePage3() {
        this.all = false;
        this.obligation = false;
        this.unDelivery = true;
        this.dispatched = false;
        this.refund = false;
        this.status = 1;
        this.getStatus();
      },
      changePage4() {
        this.all = false;
        this.obligation = false;
        this.unDelivery = false;
        this.dispatched = true;
        this.refund = false;
        this.status = 2;
        this.getStatus();
      },
      changePage5() {
        this.all = false;
        this.obligation = false;
        this.unDelivery = false;
        this.dispatched = false;
        this.refund = true;
        this.status = 3;
        this.getStatus();
      },

      getAll() {
        this.$request.post({
          url: '/api/deal/list4Mobile',
          data: {}
        }).then(res => {
          this.arrlist = res;
          console.log(this.arrlist)
        })
      },

      getStatus() {
        this.$request.post({
          url: '/api/deal/list4Mobile',
          data: {
            'dealStatus': this.status,
          }
        }).then(res => {
          this.arrlist = res;
          console.log(this.arrlist)
        })
      },
      gotoPage(dealStatus,list){
        this.paintingIds=[];
        if(dealStatus===0){
          for (let i = 0; i < list.paintingDTOS.length; i++) {
            this.paintingIds[i] = list.paintingDTOS[i].paintingId;
          }
          const url =  '/pages/payment/main?paintingIds=' + this.paintingIds + '&dealId=' + list.dealId
          const pages = getCurrentPages();
          if(pages.length === 10){
            wx.redirectTo({url});
          }
          else{
            wx.navigateTo({url});
          }
        }
        else if(dealStatus===1){
          for (let i = 0; i < list.paintingDTOS.length; i++) {
            this.paintingIds[i] = list.paintingDTOS[i].paintingId;
          }
          const url =  '/pages/delivery/main?paintingIds=' + this.paintingIds + '&dealId=' + list.dealId;
          const pages = getCurrentPages();
          if(pages.length === 10){
            wx.redirectTo({url});
          }
          else{
            wx.navigateTo({url});
          }
        }
        else if(dealStatus===2){
          for (let i = 0; i < list.paintingDTOS.length; i++) {
            this.paintingIds[i] = list.paintingDTOS[i].paintingId;
          }
          const url = '/pages/received/main?paintingIds=' + this.paintingIds + '&dealId=' + list.dealId;
          const pages = getCurrentPages();
          if(pages.length === 10){
            wx.redirectTo({url});
          }
          else{
            wx.navigateTo({url});
          }
        }
        else if(dealStatus===3){
          for (let i = 0; i < list.paintingDTOS.length; i++) {
            this.paintingIds[i] = list.paintingDTOS[i].paintingId;
          }
          const url =  '/pages/refund/main?paintingIds=' + this.paintingIds + '&dealId=' + list.dealId;
          const pages = getCurrentPages();
          if(pages.length === 10){
            wx.redirectTo({url});
          }
          else{
            wx.navigateTo({url});
          }
        }
        else if(dealStatus===5){
          for (let i = 0; i < list.paintingDTOS.length; i++) {
            this.paintingIds[i] = list.paintingDTOS[i].paintingId;
          }
          const url = '/pages/finished/main?paintingIds=' + this.paintingIds + '&dealId=' + list.dealId;
          const pages = getCurrentPages();
          if(pages.length === 10){
            wx.redirectTo({url});
          }
          else{
            wx.navigateTo({url});
          }
        }
        else if(dealStatus===6){
          for (let i = 0; i < list.paintingDTOS.length; i++) {
            this.paintingIds[i] = list.paintingDTOS[i].paintingId;
          }
          const url = '/pages/orderCancel/main?paintingIds=' + this.paintingIds + '&dealId=' + list.dealId;
          const pages = getCurrentPages();
          if(pages.length === 10){
            wx.redirectTo({url});
          }
          else{
            wx.navigateTo({url});
          }
        }
      }
    },
    gotoReceived(){
      this.paintingIds=[];
      for (let i = 0; i < list.paintingDTOS.length; i++) {
        this.paintingIds[i] = list.paintingDTOS[i].paintingId;
      }
      const url = '/pages/received/main?paintingIds=' + this.paintingIds + '&dealId=' + list.dealId;
      const pages = getCurrentPages();
      if(pages.length === 10){
        wx.redirectTo({url});
      }
      else{
        wx.navigateTo({url});
      }
    }
  }
</script>

<style scoped>
  .body {
    background: rgba(247, 247, 247, 1);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .navbar {
    width: 375px;
    height: 40px;
    background: rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: row;
  }

  .status {
    text-align: center;
    width: 75px;
    height: 40px;
  }

  .pay_status {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 40px;
  }

  .isIn {
    margin-top: -4px;
    margin-left: 7px;
    width: 60px;
    height: 4px;
    background: rgba(144, 42, 38, 1);
  }

  .head {
    width: 375px;
    height: 35px;
  }

  .line {
    margin-left: 12px;
    width: 351px;
    height: 1px;
    background: rgba(247, 247, 247, 1)
  }

  .bottom {
    width: 375px;
    height: 41px;
  }

  .under {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    background: rgb(255, 255, 255)
  }

  .createTime_text {
    position: relative;
    top: 13px;
    left: 16px;
    font-size: 11px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 16px;
  }

  .orderId_text {
    position: relative;
    top: 13px;
    left: 45px;
    font-size: 11px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 16px;
  }

  .count_text {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 17px;
  }

  .status_text {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 17px;
  }

  .status_text1 {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 17px;
  }

  .status_text2 {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 17px;
  }

  .button1 {
    margin-top: -18px;
    margin-left: 230px;
    width: 60px;
    height: 21px;
    background: rgba(144, 42, 38, 1);
    border-radius: 4px;
    text-align: center;
  }

  .button1_text {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 15px;
  }

  .button2 {
    margin-top: -18px;
    margin-left: 225px;
    width: 60px;
    height: 21px;
    background: rgba(144, 42, 38, 1);
    border-radius: 4px;
    text-align: center;
  }

  .button3 {
    margin-top: -20px;
    margin-left: 295px;
    width: 60px;
    height: 21px;
    background: rgba(144, 42, 38, 1);
    border-radius: 4px;
    text-align: center;
  }

  .bodyofbody {
    width: 375px;
    display: flex;
    flex-direction: column;
  }

  .div2 {
    height: 90px;
  }

  .pic_div {
    position: relative;
    top: 8px;
    left: 12px;
    width: 74px;
    height: 74px;
    background: rgba(236, 238, 240, 1);
  }

  .rightulliimg {
    /*background-size:contain;*/
    width: 100%;
    height: 100%;
  }

  .title_div {
    position: relative;
    top: -70px;
    left: 94px;
    width: 243px;
    height: 44px;
  }

  .title {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(47, 49, 51, 1);
    line-height: 22px;
  }

  .price {
    position: relative;
    top: -58px;
    left: 94px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(225, 140, 30, 1);
    line-height: 22px;
  }

  .pay {
    position: relative;
    top: -78px;
    left: 300px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 17px;
  }

  .pay1 {
    position: relative;
    top: -56px;
    left: 260px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 17px;
  }

  .end {
    width: 375px;
    height: 45px;
  }

  .end_text {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 57px;
  }

  .noMore {
    text-align: center;
    width: 375px;
    height: 57px;
  }

  .div_money{
    width:200px;
    margin-top: 12px;
    margin-left: 12px;
  }

  .status_div{
    width:80px;
    margin-top: -20px;
    margin-left:310px;
  }

  .status_div1{
    width:60px;
    margin-top: -10px;
    margin-left:180px;
  }

  .status_div2{
    width:60px;
    margin-top: -10px;
    margin-left:250px;
  }
</style>
